<template>
	<view class="container">
		<!-- 添加背景装饰 -->
		<!-- <view class="background-decoration">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="pattern"></view>
		</view> -->

		<view class="header">
			<view class="title-section">
				<text class="title">赛事</text>
				<text class="count">({{ tournamentsList.length }})</text>
				<text class="subtitle">发现精彩赛事，开启竞技之旅</text>
			</view>
			<view class="create-btn" @tap="handleCreate">
				<text class="btn-text">创建赛事</text>
				<text class="btn-icon">+</text>
			</view>
		</view>

		<view class="tournaments-list">
			<view v-for="(item, index) in tournamentsList" :key="index" class="tournament-item" @tap="goToDetail(item)">
				<view class="badge" @tap="uploadLogo(item)">
					<image :src="config.baseUrl + item.img" class="badge-img" mode="aspectFill"></image>
				</view>

				<view class="info">
					<view class="top-row">
						<view class="left">
							<text class="tournament-name">{{ item.tournamentName }}</text>
							<view class="tags">
								<!-- <text class="tag type">{{ item.schedule }}</text> -->
								<text class="tag type">{{ item.saizhi }}</text>
							</view>
						</view>
						<view class="host-info">
							<text class="host-name">{{ item.hoster }}</text>
						</view>
					</view>

					<view class="middle-row">
						<view class="location">
							<text class="icon">📍</text>
							<text class="city-name">{{ item.city }}</text>
						</view>
						<view class="meta">
							<text class="participant-count">{{ item.num || 0 }}队伍参与</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getTournamentsList } from "@/api/system/saishi";
import { upload } from "@/api/system/upload";
import config from "@/config";
export default {
	data() {
		return {
			tournamentsList: [],
			config
		};
	},
	onShow() {
		this.getTournamentsList();
	},
	methods: {
		async getTournamentsList() {
			const res = await getTournamentsList({
				pageNum: 1,
				pageSize: 1010
			});
			this.tournamentsList = res.data.records;
			console.log(this.tournamentsList);
		},
		handleCreate() {
			uni.navigateTo({
				url: "/pages/pubSaishi/pubSaishi"
			});
		},
		goToDetail(item) {
			uni.setStorageSync("saishi", JSON.stringify(item));
			uni.navigateTo({
				url: "/pages/saishiDetail/saishiDetail"
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f0f2f5;
	padding: 24rpx;
	position: relative;
	overflow: hidden;
}

// 添加背景装饰样式
.background-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;

	.circle {
		position: absolute;
		border-radius: 50%;

		&.circle-1 {
			width: 400rpx;
			height: 400rpx;
			background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(69, 160, 73, 0.05));
			top: -100rpx;
			right: -100rpx;
		}

		&.circle-2 {
			width: 300rpx;
			height: 300rpx;
			background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(33, 150, 243, 0.03));
			bottom: -50rpx;
			left: -50rpx;
		}
	}

	.pattern {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		opacity: 0.03;
		background-image: repeating-linear-gradient(45deg, #000 0, #000 1px, transparent 0, transparent 50%);
		background-size: 10px 10px;
	}
}

.header {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 30rpx 0;
	margin-bottom: 24rpx;

	.title-section {
		.title {
			font-size: 48rpx;
			font-weight: 600;
			color: #1a1a1a;
			margin-right: 8rpx;
		}

		.count {
			font-size: 32rpx;
			color: #666;
			font-weight: normal;
		}

		.subtitle {
			display: block;
			font-size: 24rpx;
			color: #999;
			margin-top: 8rpx;
		}
	}

	.create-btn {
		display: flex;
		align-items: center;
		background: linear-gradient(135deg, #4caf50, #45a049);
		padding: 16rpx 32rpx;
		border-radius: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.15);
		}

		.btn-text {
			color: #fff;
			font-size: 28rpx;
			margin-right: 8rpx;
		}

		.btn-icon {
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
}

.tournaments-list {
	position: relative;
	z-index: 1;

	.tournament-item {
		display: flex;
		padding: 24rpx;
		margin-bottom: 24rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
		border: 1px solid rgba(0, 0, 0, 0.03);
		backdrop-filter: blur(10px);

		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		}

		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		}

		.badge {
			width: 160rpx;
			height: 160rpx;
			margin-right: 24rpx;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
			position: relative;
			overflow: hidden;

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
				pointer-events: none;
			}

			.badge-img {
				width: 100%;
				height: 100%;
				background: linear-gradient(135deg, #f8f9fa, #e9ecef);
			}
		}

		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.top-row {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 20rpx;

				.left {
					flex: 1;
					margin-right: 20rpx;

					.tournament-name {
						font-size: 32rpx;
						font-weight: 600;
						color: #1a1a1a;
						line-height: 1.4;
						margin-bottom: 12rpx;
					}

					.tags {
						display: flex;
						gap: 12rpx;

						.tag {
							font-size: 22rpx;
							padding: 4rpx 16rpx;
							border-radius: 20rpx;

							&.status {
								color: #2196f3;
								background: rgba(33, 150, 243, 0.1);
								border: 1px solid rgba(33, 150, 243, 0.2);
							}

							&.type {
								color: #ff9800;
								background: rgba(255, 152, 0, 0.1);
								border: 1px solid rgba(255, 152, 0, 0.2);
							}
						}
					}
				}

				.host-info {
					display: flex;
					align-items: center;
					padding: 8rpx 16rpx;
					background: linear-gradient(to right, #f8f9fa, #ffffff);
					border-radius: 24rpx;
					border: 1px solid rgba(0, 0, 0, 0.04);

					.host-avatar {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						margin-right: 8rpx;
						border: 2rpx solid #fff;
						box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
					}

					.host-name {
						font-size: 24rpx;
						color: #666;
						max-width: 120rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.middle-row {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.location {
					display: flex;
					align-items: center;
					background: #f8f9fa;
					padding: 6rpx 16rpx;
					border-radius: 20rpx;

					.icon {
						font-size: 24rpx;
						margin-right: 6rpx;
					}

					.city-name {
						font-size: 24rpx;
						color: #666;
					}
				}

				.meta {
					.participant-count {
						font-size: 24rpx;
						color: #666;
						background: linear-gradient(to right, #f8f9fa, #ffffff);
						padding: 6rpx 16rpx;
						border-radius: 20rpx;
						border: 1px solid rgba(0, 0, 0, 0.04);
					}
				}
			}
		}
	}
}
</style>
